<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@include file="/WEB-INF/views/include/head.jsp"%>
<html>
<head>
	<meta name="decorator" content="sysDefault"/>
	<base target="_self">
	<link href="${staticPath}/lib/datetimepicker/0.0.11/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
	<link href="${staticPath}/lib/chosen/1.1.0/chosen.min.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="${staticPath}/lib/ztree/3.5/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<!-- 选择对话框依赖的js -->
	<script src="${staticPath}/lib/ztree/3.5/js/jquery.ztree.all-3.5.js" type="text/javascript"></script>
	<script src="${staticPath}/js/jquery-dialog.js" type="text/javascript"></script>
	<title>节点配置</title> 
	<script type="text/javascript">
		$(document).ready(function(){
			var nodeDefType = $("#nodeDefType").val();
			//初始化节点信息
			if(nodeDefType == "UserTask"){
				initUser();
			}
			if(nodeDefType == "ExclusiveGateway"){
				initExclusiveGateway();
			}
			if(nodeDefType == "ServiceTask"){
				initServiceTask();
			}
			if(nodeDefType == "Start" || nodeDefType == "End"){
				initGlobalPlugin();
			}
			//全局插件选择
			//多选对话框
			var opt = {
					service: "getGlobalPluginService",
					idField: "globalKeys",
					nameField: "globalNames",
					multiple: "true",
					title: "地区选择对话框"
				};
			$("#regionDialogMultiple").Dialog(opt);
			//多选对话框
			var opt1 = {
					service: "getOptBtnService",
					idField: "optBtnKeys",
					nameField: "optBtnNames",
					multiple: "true",
					title: "操作选择"
				};
			$("#optBtnDialogMultiple").Dialog(opt1);
			
			//单选对话框
			var opt2 = {
					service: "selectFormDataService",
					idField: "formKey",
					nameField: "formName",
					title: "表单选择对话框",
				};
			$("#selectFormDataDialog").Dialog(opt2);
			
			//单选对话框
			var opt3 = {
					service: "selectFlowNodeService&proDefId="+'${model.bpmProcessDef.processDefinitionId}',
					multiple : true,
					idField: "editNodeIds",
					nameField: "editNodeNames",
					title: "选择流程节点",
				};
			$("#selectNodesByEdit").Dialog(opt3);
			
			//单选对话框
			var opt4 = {
					service: "selectFlowNodeService&proDefId="+'${model.bpmProcessDef.processDefinitionId}',
					multiple : true,
					idField: "viewNodeIds",
					nameField: "viewNodeNames",
					title: "选择流程节点",
				};
			$("#selectNodesByView").Dialog(opt4);
		});
		
		//初始化
		$(function(){
			//处理人类型事件绑定
			$("input[name='userType']").change(function(){
				var value = $("input[name='userType']:checked").val();
				switch (value) {
				   case "1" :
				       $("#userType_user").show();
				       hideDiv(["generalPost","vars","optUser"]);
				       break;
				   case "2" :
					   $("#userType_generalPost").show();
					   hideDiv(["user","vars","optUser"]);
					   break;
				   case "3" :
					   $("#userType_vars").show();
					   hideDiv(["user","generalPost","optUser"]);
					   break;
				   case "4" :
					   $("#userType_optUser").show();
					   hideDiv(["user","generalPost","vars"]);
					   break;
				} 
			});	
			//通用岗位变量类型
			$("input[name='applicantType']").change(function(){
				var value = $("input[name='applicantType']:checked").val();
				switch (value) {
				   case "1" :
				       $("#applicantInfo").hide();
				       break;
				   case "2" :
					   $("#applicantInfo").show();
					   break;
				} 
			})
		})
		//给用户赋值
		function initUser(){
			var dataInfo = ${dataInfo};
			if(dataInfo.userType){
				$("input[name='userType'][value="+dataInfo.userType+"]").attr("checked",true);
				switch (dataInfo.userType) {
				   case "1" :
				       $("#userType_user").show();
				       hideDiv(["generalPost","vars","optUser"]);
				       initUserData("#userType_user",dataInfo.dataInfo);
				       break;
				   case "2" :
					   $("#userType_generalPost").show();
					   hideDiv(["user","vars","optUser"]);
					   initUserData("#userType_generalPost",dataInfo.dataInfo);
					   break;
				   case "3" :
					   $("#userType_vars").show();
					   hideDiv(["user","generalPost","optUser"]);
					   initUserData("#userType_vars",dataInfo.dataInfo);
					   break;
				   case "4" :
					   $("#userType_optUser").show();
					   hideDiv(["user","generalPost","vars"]);
					   initUserData("#userType_optUser",dataInfo.dataInfo);
					   break;
				} 
			}
			if(dataInfo.optBtnKeys){
				$("#optBtnKeys").val(dataInfo.optBtnKeys);
			}
			if(dataInfo.optBtnNames){
				$("#optBtnNames").val(dataInfo.optBtnNames);
			}
			if(dataInfo.formKey){
				$("#formKey").val(dataInfo.formKey);
			}
			if(dataInfo.formName){
				$("#formName").val(dataInfo.formName);
			}
			if(dataInfo.editNodeNames){
				$("#editNodeNames").val(dataInfo.editNodeNames);
			}
			if(dataInfo.editNodeIds){
				$("#editNodeIds").val(dataInfo.editNodeIds);
			}
			if(dataInfo.viewNodeNames){
				$("#viewNodeNames").val(dataInfo.viewNodeNames);
			}
			if(dataInfo.viewNodeIds){
				$("#viewNodeIds").val(dataInfo.viewNodeIds);
			}
		}
		
		function initUserData(div_id,userDatas){
			$.each($.parseJSON(userDatas),function(key,value){
				if(key == "orgType"){
					$("input[name='orgType'][value="+value+"]").attr("checked",true);
				}else{
					$("#"+key).val(value);
				}	
			})
		}
		
		//初始化网关
		function initExclusiveGateway(){
			var dataInfo = ${dataInfo};
			if(dataInfo){
				$.each(dataInfo,function(key,value){
					$("#"+key).val(value);
				})
			}
		}
		
		//初始化服务节点
		function initServiceTask(){
			var dataInfo = ${dataInfo};
			if(dataInfo){
				$("input[name='scriptType'][value="+dataInfo.scriptType+"]").attr("checked",true);
				if(dataInfo.scriptType=="1"){
					$(".script-class").show();
				    $(".message-class").css("display","none");
					$.each(dataInfo,function(key,value){
						$("#"+key).val(value);
					})
				}else{
					$(".message-class").show();
					$(".script-class").css("display","none");
					initUser();
				}
				
			}
		}
		//初始化全局插件信息
		function initGlobalPlugin(){
			var dataInfo = ${dataInfo};
			if(dataInfo){
				$.each(dataInfo,function(key,value){
					$("#"+key).val(value);
				})
			}
		}
		//隐藏div
		function hideDiv(divTypes){
			$.each(divTypes, function (index, divType){
				var userTypeDiv = "#userType_"+divType;
				$(userTypeDiv).hide();
				//清空数据
				cleanDataDiv(userTypeDiv);
			});
		}
		//清空DIV数据
		function cleanDataDiv(userTypeDiv){
			$(userTypeDiv).find(":input").not(":radio").not(":button").each(function(index,input_obj){
				$(this).val("");
			});
		}
		//提交表单
		function submitForm(){
			//获取处理人类型
			var dataInfo = null;
			var nodeDefType = $("#nodeDefType").val();
			//TODO 校验数据
			if(nodeDefType == "UserTask"){
				dataInfo = getUserData();
			}
			if(nodeDefType == "ExclusiveGateway"){
				dataInfo = getExclusiveGatewayData()
			}
			if(nodeDefType == "ServiceTask"){
				dataInfo = getServiceTask();
			}
			if(nodeDefType == "Start" || nodeDefType == "End"){
				dataInfo = {};
				dataInfo.globalKeys = $("#globalKeys").val();
			}
			//alert(JSON.stringify(dataInfo));
			//return false;
			if(typeof(dataInfo) != "undefined" && dataInfo != null){
				$("#dataInfo").val(JSON.stringify(dataInfo));
			}else{
				alert("信息不能为空！");
				return false;
			}
			//提交表单
		 	$("#optForm").attr("action", "${pageContext.request.contextPath}"+"/bpm/def/node/saveNode");  	
		 	$("#optForm").submit();  	
		}
		//获取节点处理人信息
		function getUserData(){
			//获取处理人类型
			var userType_value = $("input[name='userType']:checked").val();
			var userInfo = null;
			switch (userType_value) {
			   case "1" :
				   userInfo = getDataDiv("user",userType_value);
			       break;
			   case "2" :
				   userInfo = getDataDiv("generalPost",userType_value);
				   break;
			   case "3" :
				   userInfo = getDataDiv("vars",userType_value);
				   break;
			   case "4" :
				   userInfo = getDataDiv("optUser",userType_value);
				   break;
			}
			return userInfo;
		}
		//获取网关信息
		function getExclusiveGatewayData(){
			var dataInfo = {};
			dataInfo.dataOutNode = {};
			dataInfo.dataOutNodeName = {};
			$(".outNode").each(function(index,tr_obj){
				$(tr_obj).find(":hidden").each(function(index,input_obj){
					var valueInfo = $(this).val();
					if(valueInfo){
						var key = $(this).attr("id");
						dataInfo.dataOutNode[key] = valueInfo;
					}	
				});
			});
			$(".outNode").each(function(index,tr_obj){
				$(tr_obj).find(":text").each(function(index,input_obj){
					var valueInfo = $(this).val();
					if(valueInfo){
						var key = $(this).attr("id");
						dataInfo.dataOutNodeName[key] = valueInfo;
					}	
				});
			});
			return dataInfo;
		}
		//获取脚本节点信息
		function getServiceTask(){
			var dataInfo = {};
			//获取处理人类型
			var scriptType_value = $("input[name='scriptType']:checked").val();
			if(scriptType_value == "1"){
				var scriptInfo = $("#scriptInfo").val();
				if(scriptInfo != null){
					dataInfo.scriptInfo = scriptInfo;
					dataInfo.scriptInfoName = $("#scriptInfoName").val();
				}
			}else{
				dataInfo = getUserData();
			}
			dataInfo.scriptType = scriptType_value;
			return dataInfo;
		}
		//获取DIV数据
		function getDataDiv(obj,userTypeValue){
			var userTypeDiv = "#userType_" + obj;
			var result = {};
			result.userType = userTypeValue;
			$(userTypeDiv).find(":input").not(":button").each(function(index,input_obj){
				var key = $(this).attr("name");
				if(typeof(key) == "undefined")
					return true;
				var value = null;
				if($(input_obj).attr("type") == "radio"){
					value = $("input[name='"+key+"']:checked").val();
				}else{
					value = $(input_obj).val();
				}
				result[key] = value;
			});
			return result;
		}
		//公式选择
		function selectFormula(idField){
			var obj = new Object();
			obj.name=$("#"+idField+"Name").val();
			obj.proDefId=$("#proDefId").val();
			var result = window.showModalDialog("${contextPath}"+"/bpm/formula/view",obj,"dialogWidth=1200px;dialogHeight=650px");
			$("#"+idField).val(result.idField);
			$("#"+idField+"Name").val(result.nameField);
		}
		
	</script>
</head>
<body>
	<form id="optForm" role="form" class="form-horizontal" method="post">
		<div class="panel panel-default"> 
		  <div class="col-xs-12 panel-heading">
		    <h2 class="panel-title o-v-action">
		    	<a class="btn btn-default pull-right" role="button" href="javascript:void(0)" onclick="submitForm();">保存</a>
		    	<a class="btn btn-default pull-right" role="button" href="javascript:void(0)" onclick="window.close();">关闭</a>
		    </h2>
		  </div> 
		  <div>
			 <div class="tab-content">
			 	 <ul class="nav nav-tabs" id="myTab">
				 	<li class="active"><a href="#home" data-toggle="tab">基本信息</a></li>
				 	<c:if test="${model.type eq 'UserTask'}">
				 		<li><a href="#optButton" data-toggle="tab">操作</a></li>
				 	</c:if>
				  	<li><a href="#seniorInfo"  data-toggle="tab">高级设置</a></li>
				 </ul> 
				 <div class="tab-pane active" id="home">
				 	<table style="border:1px solid 000;width:100%;" cellpadding="5" cellspacing="5" >  
					  	<tr>
					  		<td class="text-right col-sm-2" style="background-color:#e8e8e8"><strong>节点名称:</strong></td>
					  		<td class="col-sm-8">
					  			<input type="text" class="f_5" id="nodeDefName" name="nodeDefName" value="${model.name}"/>
					  			<input type="hidden" id="nodeDefId" name="nodeDefId" value="${model.nodeId}"/>
					  			<input type="hidden" id="proDefId" name="proDefId" value="${model.bpmProcessDef.processDefinitionId}"/>
					  			<input type="hidden" id="nodeDefType" name="nodeDefType" value="${model.type}"/>
					  			
						  		<input type="hidden" id="dataInfo" name="dataInfo"/> 
					  		</td>
					  	</tr>
					  	<tr>
					  		<td class="text-right col-sm-2" style="background-color:#e8e8e8"><strong>节点ID:</strong></td>
					  		<td class="col-sm-8">${model.nodeId}</td>
					  	</tr>
						<!--  -->
						<c:if test="${model.type eq 'UserTask'}">
							<tr>
						  		<td class="text-right col-sm-2" style="background-color:#e8e8e8"><strong>节点处理人:</strong></td>
						  		<td class="col-sm-8">
						  			<input type="radio" name="userType" value="1" checked="checked">岗位/人员</input>
						  			<input type="radio" name="userType" value="2">通用岗位</input>
						  			<input type="radio" name="userType" value="3">流程变量</input>
						  			<input type="radio" name="userType" value="4">备选列表</input>	
						  		</td>
						  	</tr>
						  	<tr>
						  		<td class="text-right col-sm-2" style="background-color:#e8e8e8"></td>
						  		<td "col-sm-8">
						  			<!-- 组织选择 -->
						  			<div id="userType_user">
						  				<div class="form-group">
											<div class="col-sm-5">
												<input type="hidden" id="userId" name="userId"/> 
												<div class="input-group">
											      <input type="text" class="form-control" id="userName" name="userName" readonly="readonly"/>
											      <span class="input-group-btn">
											        <button class="btn btn-primary" id="userDialogMultiple" data-dialog="dialog" data-multiple="true" data-idField="userId" data-nameField="userName" data-authType="POST_USER" type="button">
											        	选择
											        </button>
											      </span>
											    </div>
											</div>
										</div>
									</div>
									<!-- 通用岗位 -->
									<div id="userType_generalPost" style="display:none">
										<div class="form-group  col-sm-12">
											<div class="col-sm-5">
												<input type="hidden" id="generalPostId" name="generalPostId"/> 
												<div class="input-group">
											      <input type="text" class="form-control" id="generalPostName" name="generalPostName" readonly="readonly"/>
											      <span class="input-group-btn">
											        <button class="btn btn-primary" id="userDialogMultiple2" data-dialog="dialog" data-multiple="true" data-idField="generalPostId" data-nameField="generalPostName" data-authType="GENERAL_POST" type="button">
											        	选择
											        </button>
											      </span>
											    </div>
											</div>
										</div>
									</div>
									<!-- 流程变量 -->
									<div id="userType_vars" style="display:none">
										<div id="applicantInfo" style="display:null">
											<div class="form-group col-sm-12">
												<label for="name" class="col-sm-1">变量:</label>
												<div class="col-sm-8">
													<input type="text" class="col-sm-4" id="gPostVarName" name="gPostVarName"></input>
													<input type="hidden" id="gPostVar" name="gPostVar"></input>
													<input type="button" class="col-sm-1" id="formula" name="formula" onclick="selectFormula('gPostVar');" value="选择"/>
												</div>
											</div>
											<div class="form-group col-sm-12">
												<label for="name" class="col-sm-1">变量类型:</label>
												<div class="col-sm-8">
													<input type="radio" name="orgType" value="user" checked="checked">人员</input>
													<input type="radio" name="orgType" value="post">岗位</input>
													<input type="radio" name="orgType" value="dept">部门</input>	
												</div>
											</div>
											<div class="form-group col-sm-12">
												<label for="name" class="col-sm-1">通用岗位:</label>
												<input type="hidden" id="generalPostVarId" name="generalPostVarId"> 
												<div class="col-sm-9">
											      <input type="text" class="col-sm-6" id="generalPostVarName" name="generalPostVarName" readonly="readonly"/>
											      <span class="input-group-btn">
											        <button class="col-sm-2" id="userDialogMultiple3" data-dialog="dialog" data-multiple="true" data-idField="generalPostVarId" data-nameField="generalPostVarName" data-authType="GENERAL_POST" type="button">
											        	选择
											        </button>
											      </span>
											    </div>
											</div>
										</div>
									</div>
									<!-- 备选列表  -->
									<div id="userType_optUser" style="display:none">
										<div class="col-sm-5">
										    <input type="hidden" id="optionalId" name="optionalId"/> 
											<div class="input-group">
										      <input type="text" class="form-control" id="optionalName" name="optionalName" readonly="readonly"/>
										      <span class="input-group-btn">
										        <button class="btn btn-primary" id="optionaDialogMultiple" data-dialog="dialog" data-multiple="true" data-idField="optionalId" data-nameField="optionalName" data-authType="POST_USER" type="button">
										        	选择
										        </button>
										      </span>
										    </div>
										</div>
									</div>
						  		</td>
						  	</tr>
						  	
						  	<tr>
						  		<td class="text-right col-sm-2" style="background-color:#e8e8e8"><strong>通知方式:</strong></td>
						  		<td class="col-sm-8">
						  			<ossp:checkbox id="notifyType" name="notifyType" defaultChecked="TODOMESSAGE" dictType="TODO"></ossp:checkbox>
						  		</td>
						  	</tr>
						</c:if>
						<c:if test="${model.type eq 'ExclusiveGateway'}">
							<c:import url="exclusivegateway.jsp"></c:import>
						</c:if>
						<c:if test="${model.type eq 'ServiceTask'}">
							<c:import url="scriptNode.jsp"></c:import>
						</c:if>
						<c:if test="${model.type eq 'Start' || model.type eq 'End'}">
							<c:import url="global.jsp"></c:import>
						</c:if>
				    </table>
				 </div> 
				 <c:if test="${model.type eq 'UserTask'}">
				 	<div class="tab-pane" id="optButton">
						 <table style="border:1px solid 000;width:100%;" cellpadding="5" cellspacing="5" >  
						  	<tr>
						  		<td class="text-right col-sm-2" style="background-color:#e8e8e8"><strong>操作:</strong></td>
						  		<td class="col-sm-8">
						  			<div class="form-group">
										<div class="col-sm-5">
											<input type="hidden" id="optBtnKeys" name="optBtnKeys"/> 
											<div class="input-group">
										      <input type="text" class="form-control" id="optBtnNames" name="optBtnNames" readonly="readonly"/>
										      <span class="input-group-btn">
										        <button class="btn btn-primary" id="optBtnDialogMultiple" type="button">
										        	选择
										        </button>
										      </span>
										    </div>
										</div>
									</div>
						  		</td>
						  	</tr> 	
						  </table>
				 	</div>
				 </c:if>
				 <c:if test="${model.type eq 'UserTask' || model.type eq 'Start'}">
				 	<div class="tab-pane" id="seniorInfo">
					 	<table style="border:1px solid 000;width:50%;" cellpadding="5" cellspacing="5" >  
						  	<tr>
						  		<td class="text-right col-sm-2" style="background-color:#e8e8e8"><strong>表单选择:</strong></td>
						  		<td class="col-sm-3">
						  			<div class="input-group">
						  				<input type="hidden" id="formKey" name="formKey"/> 
					      				<input type="text" class="form-control" id="formName" name="formName" readonly="readonly"/>
					      				<span class="input-group-btn">
					        				<button class="btn btn-primary" id="selectFormDataDialog" type="button">
					        					选择
					        				</button>
					      				</span>
					    			</div>
						  		</td>
						  	</tr>
						  	<!-- 可编辑节点 -->
						  	<tr>
						  		<td class="text-right col-sm-2" style="background-color:#e8e8e8"><strong>可编辑节点:</strong></td>
						  		<td class="col-sm-5">
						  			<div class="input-group">
						  				<input type="hidden" id="editNodeIds" name="editNodeIds"/> 
					      				<textarea id="editNodeNames" name="editNodeNames" readonly="readonly" rows="3" class="form-control f_11"></textarea>
					      				<span class="input-group-btn">
					        				<button class="btn btn-primary" id="selectNodesByEdit" type="button">
					        					选择
					        				</button>
					      				</span>
					    			</div>
						  		</td>
						  	</tr>
						  	<!-- 可查看节点 -->
						  	<tr>
						  		<td class="text-right col-sm-2" style="background-color:#e8e8e8"><strong>可查看节点:</strong></td>
						  		<td class="col-sm-5">
						  			<div class="input-group">
						  				<input type="hidden" id="viewNodeIds" name="viewNodeIds"/> 
					      				<textarea id="viewNodeNames" name="viewNodeNames" readonly="readonly" rows="3" class="form-control f_11"></textarea>
					      				<span class="input-group-btn">
					        				<button class="btn btn-primary" id="selectNodesByView" type="button">
					        					选择
					        				</button>
					      				</span>
					    			</div>
						  		</td>
						  	</tr>
						</table>
					 </div>
				 </c:if>
			 </div> 
		</div>
	</form>
</body>
</html>